<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML>

<html>
    <head>
        <title>Venta de Tiquetes</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!--Styles-->
        
        <link rel="stylesheet" type="text/css" href="../styles/sale.css" />
        <!--JQuery-->
        <link rel="stylesheet" type="text/css" href="../js/jquery/fancybox/fancybox/jquery.fancybox-1.3.1.css"/>
        <link rel="stylesheet" type="text/css" href="../styles/calendario/jquery.ui.all.css" />
        <link rel="stylesheet" type="text/css" href="../styles/calendario/demos.css" />
        <script type="text/javascript" language="javascript" src="../js/login.js"></script>

        <!--JavaScript-->
        <script language="javascript" type="text/javascript" src="../js/jquery/calendar/jquery-1.4.2.js"></script>
        <script type="text/javascript" src="../js/ajax.js"></script>
        <script type="text/javascript" src="../js/sale.js"></script>
        <script type="text/javascript" src="../js/jquery/fancybox/fancybox/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="../js/jquery/fancybox/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
        <script type="text/javascript" src="../js/jquery/fancybox/fancybox/jquery.fancybox-1.3.1.js"></script>
        <script language="javascript" type="text/javascript" src="../js/jquery/calendar/jquery.ui.core.js"></script>
        <script language="javascript" type="text/javascript" src="../js/jquery/calendar/jquery.ui.widget.js"></script>
        <script language="javascript" type="text/javascript" src="../js/jquery/calendar/jquery.ui.datepicker.js"></script>
        <script type="text/javascript" src="../js/jquery/alerts/jquery.alerts.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#txtDateTravel').datepicker(
                {   //dateFormat: 'mm/dd/yy',
                    minDate: '+0D',
                    maxDate: '+1Y',
                    changeMonth: true,
                    changeYear: true
                });
                
                $("#ce").fancybox({
                    'width': 300,
                    'height': '100%',
                    'autoScale': false,
                    'transitionIn': 'none',
                    'transitionOut'		: 'none',
                    'type'	: 'iframe'
                });
                $("#chosePlace").fancybox({
                    'width':560,
                    'height':340,
                    'hideOnContentClick': false,
                    'overlayOpacity': 0.5
                });
            });
        </script>


    </head>
    <body onload="loadSource()">

        <div>
            <table class="board" >
                <tr>
                    <td colspan="2">Nombre de Usuario</td>
                    <td colspan="2"><input type="text" id="txtUserID" placeholder="lorenita" value="yeimy"/></td>
                </tr>
                <tr>
                    <td colspan="2">Partir de:</td>
                    <td colspan="2"><select id="selSource" class="selSource" onChange="changeDestination()"><option>Seleccione</option></select></td>
                </tr>
                <tr>
                    <td colspan="2">Ir hasta:</td>
                    <td colspan="2"><select id="selDestination" class="selDestination"><option>Seleccione</option></select></td>
                </tr>
                <tr>
                    <td colspan="2">Fecha Salida</td>
                    <td colspan="2"><input type="text" id="txtDateTravel" name="dateTravel" placeholder="click para elegir" readonly="true" value="12/31/2010"/></td>
                </tr>
                <tr>
                    <td><input type="button" class="button_form" id="btnReserve" value="Reservar" onclick="" /></td>
                    <td><input type="text" id="txtTicketID1" placeholder="1000" size="4" /></td>
                    <td><input type="button" class="button_form" value="Consultar Ticket" size="20pt" id="btnQueryReserve" onclick=""/></td>
                </tr>

            </table>

        </div>
        <div id="action" style="display: none;"><input type="text" id="txtAction" value=""></div>
        <table align="center">
            <tr>
                <td><div id="lisHours"></div></td>
            <tr>
        </table>
        <table id="place" class="placeHidden" align="center">
            <tr>
                <td><div><a id="chosePlace" href="#divGraphicalsPlaces" onclick="initbus()">Elegir Puesto</a></div></td>
                <td><input type="text" id="txtPlace" readonly="true"/></td>
                <td><input type="button" value="Continuar" id="btnNext" onclick="btnNextReserve_onclick()"/></td>
                <td><input type="button" value="Cancelar" id="btnCancelUpdate" onclick=""/></td>
            </tr>
        </table>
        
        
        <div style="display: none">
            <div id="divGraphicalsPlaces">
            <table class="board">
                <tr>
                    <td></td>
                    <td id="2" class="AGV_SillaLibre" onclick="canSelectPlace(2)"></td>
                    <td id="6" class="AGV_SillaLibre" onclick="canSelectPlace(6)"></td>
                    <td id="10" class="AGV_SillaLibre" onclick="canSelectPlace(10)"></td>
                    <td id="14" class="AGV_SillaLibre" onclick="canSelectPlace(14)"></td>
                    <td id="18" class="AGV_SillaLibre" onclick="canSelectPlace(18)"></td>
                    <td id="22" class="AGV_SillaLibre" onclick="canSelectPlace(22)"></td>
                    <td id="26" class="AGV_SillaLibre" onclick="canSelectPlace(26)"></td>
                </tr>
                <tr>
                    <td></td>
                    <td id="3" class="AGV_SillaLibre" onclick="canSelectPlace(3)"></td>
                    <td id="7" class="AGV_SillaLibre" onclick="canSelectPlace(7)"></td>
                    <td id="11" class="AGV_SillaLibre" onclick="canSelectPlace(11)"></td>
                    <td id="15" class="AGV_SillaLibre" onclick="canSelectPlace(15)"></td>
                    <td id="19" class="AGV_SillaLibre" onclick="canSelectPlace(19)"></td>
                    <td id="23" class="AGV_SillaLibre" onclick="canSelectPlace(23)"></td>
                    <td id="27" class="AGV_SillaLibre" onclick="canSelectPlace(27)"></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td id="1" class="AGV_SillaOcupada" onclick="canSelectPlace(1)"></td>
                    <td id="4" class="AGV_SillaLibre" onclick="canSelectPlace(4)"></td>
                    <td id="8" class="AGV_SillaLibre" onclick="canSelectPlace(8)"></td>
                    <td id="12" class="AGV_SillaLibre" onclick="canSelectPlace(12)"></td>
                    <td id="16" class="AGV_SillaLibre" onclick="canSelectPlace(16)"></td>
                    <td id="20" class="AGV_SillaLibre" onclick="canSelectPlace(20)"></td>
                    <td id="24" class="AGV_SillaLibre" onclick="canSelectPlace(24)"></td>
                    <td id="28" class="AGV_SillaLibre" onclick="canSelectPlace(28)"></td>
                </tr>
                <tr>
                    <td id="0" class="AGV_SillaOcupada" onclick="canSelectPlace(0)"></td>
                    <td id="5" class="AGV_SillaLibre" onclick="canSelectPlace(5)"></td>
                    <td id="9" class="AGV_SillaLibre" onclick="canSelectPlace(9)"></td>
                    <td id="13" class="AGV_SillaLibre" onclick="canSelectPlace(13)"></td>
                    <td id="17" class="AGV_SillaLibre" onclick="canSelectPlace(17)"></td>
                    <td id="21" class="AGV_SillaLibre" onclick="canSelectPlace(21)"></td>
                    <td id="25" class="AGV_SillaLibre" onclick="canSelectPlace(25)"></td>
                    <td id="29" class="AGV_SillaLibre" onclick="canSelectPlace(29)"></td>
                </tr>
            </table>
            </div>
        </div>
    </body>
</html>